﻿<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="Stylesheet" href="context/themes/base/style.css" type="text/css" />
    <link rel="Stylesheet" href="context/themes/base/jquery-ui.css" type="text/css" />
    <script src="scripts/jquery.js" type="text/javascript"></script>
    <script src="scripts/jquery-ui.js" type="text/javascript"></script>
    <script src="scripts/jquery.contextMenu.js" type="text/javascript"></script>
    <script src="scripts/jquery.cleverTabs.js" type="text/javascript"></script>
    <script type="text/javascript">
        var tabs;
        var tmpCount = 0;

        $(function () {

            tabs = $('#tabs').cleverTabs();
            $(window).bind('resize', function () {
                tabs.resizePanelContainer();
            });

            tabs.add({
                url: 'http://think8848.cnblogs.com',
                label: 'think8848'
            });

            tabs.add({
                url: 'http://www.google.com.hk',
                label: 'google'
            });

            tabs.add({
                url: 'http://www.baidu.com',
                label: 'baidu'
            });

            tabs.add({
                url: 'http://www.soso.com',
                label: 'soso',
                callback: function () {
                    alert('callback');
                }
            });

            tabs.add({
                url: 'http://www.sogou.com',
                label: 'sogou'
            });

            $('input[type="button"]').button();

            $('#btnAddMore').click(function () {
                tabs.add({
                    url: 'tmp.htm?' + tmpCount++,
                    label: 'tab' + tmpCount
                });
            });
        });
    
    </script>
</head>
<body>
    <div id="tabs" style="margin: 0px;">
        <ul>
        </ul>
    </div>
    </body>
</html>
